<!-- 群组信息 -->
<template>
  <PageContainer>
    <view class="container">
      <Header :title="'聊天信息(' + memberList.length + ')'" :isBoxShadow="false" />
      <view class="headList">
        <view v-for="(item, i) in memberList" :key="i" class="userAvatar">
          <image :src="item.avatar" class="avatar" mode="aspectFill" />
          <view class="py-5 ov-1">{{ item.nick }}</view>
        </view>
      </view>
      <view class="bgf mt-10">
        <view class="cellBox" style="padding-top: 20rpx; padding-bottom: 20rpx">
          <view>群头像</view>
          <view class="rightBox" @click="editGroupAvatar">
            <image class="avatar" :src="groupAvatar" mode="aspectFill" />
            <text v-if="isEdit" class="ali-icon fz-24" style="color: #999999">&#xe6c7;</text>
          </view>
        </view>
        <view class="cellBox">
          <view>群名称</view>
          <view class="rightBox" @click="openEdit">
            <view class="fz-14 color6">{{ groupName }}</view>
            <text v-if="isEdit" class="ali-icon fz-24" style="color: #999999">&#xe6c7;</text>
          </view>
        </view>
      </view>

      <view class="bgf mt-10">
        <view class="cellBox">
          <view>消息免打扰</view>
          <view>
            <switch
              color="#2878FF"
              style="transform: scale(0.8)"
              :checked="msgDont(messageRemindType as string)"
              @change="switchChange"
            />
          </view>
        </view>
      </view>

      <ShowModal
        v-model="visible"
        title="修改群聊名称"
        :showCancel="false"
        confirmText="完成"
        @confirm="editGroupName"
      >
        <template v-slot:content>
          <view class="inputBox">
            <input v-model="setGroupName" maxlength="15" placeholder="请输入群聊名称" />
          </view>
        </template>
      </ShowModal>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  import PageContainer from '@/components/PageContainer/index.vue';
  import { ref, unref, computed, watch } from 'vue';
  import Header from '@/components/Header/index.vue';
  import tim from '../utils';
  import { useImStoreWithOut } from '@/store/modules/im';
  import { useUpload } from '@/hooks/core/useUpload';
  import ShowModal from '@/components/ShowModal/index.vue';
  import { handleAvatar, handleName } from '../utils/untis';
  import { storeToRefs } from 'pinia';

  const useIm = useImStoreWithOut();
  const { conversation } = storeToRefs(useIm);
  const groupID = conversation.value.groupProfile?.groupID ?? '';
  const groupAvatar = ref(handleAvatar(conversation.value));
  const groupName = ref(handleName(conversation.value));
  const messageRemindType = ref(conversation.value.groupProfile?.selfInfo.messageRemindType ?? '');

  // 是否可编辑群头像和群名称,只有群组和管理员才可编辑
  const isEdit = computed(() => {
    const role = conversation.value.groupProfile?.selfInfo.role;
    return role === tim.$TIM.TYPES.GRP_MBR_ROLE_OWNER || role === tim.$TIM.TYPES.GRP_MBR_ROLE_ADMIN;
  });

  // 获取群用户列表
  const memberList = ref(<any>[]);
  const getMember = (type?: string) => {
    const options: any = {
      groupID,
      count: 100,
      offset: type && type === 'more' ? memberList.length : 0,
    };
    tim.$TUIKit.getGroupMemberList(options).then((res: any) => {
      console.log(res, '群成员列表');
      if (type && type === 'more') {
        memberList.value = [...memberList.value, ...res.data.memberList];
      } else {
        memberList.value = res.data.memberList;
      }
    });
  };
  getMember();

  // 更改群头像
  const { result, chooseFile } = useUpload({
    count: 1,
    isCrop: true,
    cropOptions: {
      width: 200,
      height: 200,
    },
  });

  watch(
    result,
    (val) => {
      const item = val[0];
      if (item && item.isSuccess) {
        tim.$TUIKit
          .updateGroupProfile({
            groupID,
            avatar: item.filePath,
          })
          .then((res: any) => {
            console.log(res, '修改群头像');
            groupAvatar.value = item.filePath ?? handleAvatar(conversation.value);
            useIm.conversation.groupProfile = res.data.group;
          });
      }
    },
    { deep: true },
  );
  function editGroupAvatar() {
    if (!isEdit.value) return;
    chooseFile({ mediaType: 'image' });
  }

  // 修改群名称
  const visible = ref<boolean>(false);
  const setGroupName = ref<string>('');
  const openEdit = function () {
    if (!isEdit.value) return;
    visible.value = true;
    setGroupName.value = groupName.value;
  };
  const editGroupName = function () {
    if (!unref(setGroupName)) return;
    tim.$TUIKit
      .updateGroupProfile({
        groupID,
        name: unref(setGroupName),
      })
      .then((res: any) => {
        console.log(res, '修改群名称');
        groupName.value = unref(setGroupName);
        useIm.conversation.groupProfile = res.data.group;
      });
  };

  // 消息免打扰
  const msgDont = function (type: string) {
    // TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE - SDK 接收消息并通知接入侧（抛出 收到消息事件），接入侧做提示
    // TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE - SDK 接收消息并通知接入侧（抛出 收到消息事件），接入侧不做提示
    // TIM.TYPES.MSG_REMIND_DISCARD - SDK 拒收消息
    return type === tim.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE ? false : true;
  };
  const switchChange = function (e: any) {
    const type = e.detail.value
      ? tim.$TIM.TYPES.MSG_REMIND_ACPT_NOT_NOTE
      : tim.$TIM.TYPES.MSG_REMIND_ACPT_AND_NOTE;
    const params = {
      groupID,
      messageRemindType: type,
    };
    tim.$TUIKit.setMessageRemindType(params).then((res: any) => {
      messageRemindType.value = type;
      useIm.conversation.groupProfile = res.data.group;
    });
  };
</script>
<style lang="scss" scoped>
  .headList {
    display: flex;
    padding: 15rpx;
    background-color: #fff;
    margin-top: 1px;

    .userAvatar {
      padding: 15rpx;
      font-size: 24rpx;
      color: #888;
      text-align: center;
    }
  }
  .color6 {
    color: #666666;
  }
  .avatar {
    width: 100rpx;
    height: 100rpx;
    display: block;
    border-radius: 10rpx;
  }
  .cellBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 90rpx;
    padding: 0 30rpx;
    .rightBox {
      display: flex;
      align-items: center;
    }
  }

  .cellBox + .cellBox {
    border-top: solid 1px #f5f5f5;
  }

  .inputBox {
    padding-bottom: 10rpx;
    border-bottom: solid 1px #dddddd;
    text-align: center;
  }
</style>
